<template>
    <el-pagination 
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page="modelValue"
        @current-change="handlePageChange"
        class="pagination"
    />
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  modelValue: {
    type: Number,
    required: true
  },
  total: {
    type: Number,
    default: 25
  },
  pageSize: {
    type: Number,
    default: 5
  }
})

const emit = defineEmits(['update:modelValue'])

const handlePageChange = (page) => {
  emit('update:modelValue', page)
}
</script>

<style scoped>
/* 分页样式 */
.pagination {
  margin-top: 20px;
  text-align: center;
}

</style>